<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Add Purchase Order</title>
    </h:head>
    <f:view beforePhase ="#{UserDisplayManagedBean.doDisplay}">
        <f:view beforePhase="#{PurchaseOrderManagedBean.initView}">
            <h:body>
                <div id="top">
                    <h:graphicImage value="/image/newHeader.jpg"/>
                </div>

                <h:form id="form" prependId="false" >
                    <!-- IDLE DIALOG for -->
                    <p:confirmDialog message="You have been idle for 5 minutes. Do you want to continue?"  
                                     showEffect="bounce" hideEffect="explode"  
                                     header="Warning message" severity="alert" widgetVar="confirmation">  
                        <p:commandButton value="Yes" onclick="confirmation.hide()" type="button" /> 
                        <p:commandButton value="No" update="panel" oncomplete="confirmation.hide()"  
                                         actionListener="#{UserManagedBean.doLogout}" /> 
                    </p:confirmDialog>

                    <p:idleMonitor timeout="300000" onidle="confirmation.show()" />  
                    <!--END OF IDLE DIALOG-->

                    <p:growl id="msgs" showDetail="tre" />


                    <div id="content">

                        <table>
                            <tr>
                                <td>
                                    <p:toolbar style="font-size:12px;margin-top:0%;height:30px;width:200px"> 
                                        <p:toolbarGroup align="right">
                                            <p:button title="Home" image="ui-icon-home" outcome="SalesDeptWorkspace"/>                                   
                                            <p:button title="Notes" image="ui-icon-note" outcome="tasks"/>                                   
                                            <p:button title="Mail" outcome="messages" image="ui-icon-mail-closed"/>                                   
                                            <p:button title="Edit Preferences" image="ui-icon-gear"/>                                    
                                            <p:button title="Help" image="ui-icon-help"/>
                                            <p:commandButton title="Log Out" immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                        </p:toolbarGroup>
                                    </p:toolbar></td>
                                <td>
                                    <h:graphicImage value="newdoc.png" style="width:45px;height:45px"/>
                                    <h:outputText value="New Purchase Order" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                    <p:separator style="width:1070px"/>
                                </td>

                            </tr>
                            <tr>
                                <td style="vertical-align:top">
                                    <p:menu style="width:200px;font-size: 12px;font-family: Tahoma;border-style: ridge">  
                                        <p:submenu label="Sales Force Automation" >  
                                            <p:menuitem value="Customers" url="http://localhost:8080/MerlionERP-war/CRM/customers.xhtml" ajax="false" icon="ui-icon ui-icon-person"/>  
                                            <p:menuitem value="Contacts" url="http://localhost:8080/MerlionERP-war/CRM/contacts.xhtml" ajax="false" icon="ui-icon ui-icon-person" />
                                            <p:menuitem value="Leads" url="http://localhost:8080/MerlionERP-war/CRM/salesLeads.xhtml" ajax="false" icon="ui-icon ui-icon-person" />
                                        </p:submenu>
                                        <p:submenu label="Sales Order Processing">
                                            <p:menuitem value="Pricebooks" url="http://localhost:8080/MerlionERP-war/CRM/pricebooks.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                            <p:menuitem value="Inquiries" url="http://localhost:8080/MerlionERP-war/CRM/salesInquiries.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                            <p:menuitem value="Quotations" url="http://localhost:8080/MerlionERP-war/CRM/quotations.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                            <p:menuitem value="Purchase Orders" url="http://localhost:8080/MerlionERP-war/CRM/purchaseOrders.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                            <p:menuitem value="Sales Orders" url="http://localhost:8080/MerlionERP-war/CRM/salesOrders.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                            <p:menuitem value="Delivery Orders" url="http://localhost:8080/MerlionERP-war/CRM/deliveryOrdersCRM.xhtml" ajax="false" icon="ui-icon ui-icon-document"/>
                                        </p:submenu>  
                                    </p:menu>
                                    <p:menu type="tiered" style="width:200px;font-family:Tahoma;font-size:12px">
                                        <p:submenu label="Create New" icon="ui-icon ui-icon-extlink">  
                                            <p:menuitem value="Customer" url="http://localhost:8080/MerlionERP-war/CRM/createNewCustomer.xhtml" />
                                            <p:menuitem value="Sales Lead" url="http://localhost:8080/MerlionERP-war/CRM/createNewSalesLead.xhtml" /> 
                                            <p:menuitem value="Contact" url="http://localhost:8080/MerlionERP-war/CRM/createNewContact.xhtml" />
                                            <p:menuitem value="Inquiry" url="http://localhost:8080/MerlionERP-war/CRM/addSalesInquiry.xhtml"/>
                                            <p:menuitem value="Quotation" url="http://localhost:8080/MerlionERP-war/CRM/addQuotation.xhtml"/>
                                            <p:menuitem value="Purchase Order" url="http://localhost:8080/MerlionERP-war/CRM/addPurchaseOrder.xhtml"/>
                                            <p:menuitem value="Sales Order" url="http://localhost:8080/MerlionERP-war/CRM/addSalesOrder.xhtml"/>
                                            <p:menuitem value="Delivery Order" url="http://localhost:8080/MerlionERP-war/CRM/addDeliveryOrder.xhtml"/>      
                                        </p:submenu>
                                    </p:menu>
                                    <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>
                                </td>

                                <td style="vertical-align:top">
                                    <p:panel id="paneldisplay" style="border-style:hidden;width:1080px;font-family:Tahoma;font-size:12px">

                                        <h:panelGrid columns="10" style="width:1080px" cellpadding="3" cellspacing="3">

                                            <h:outputLabel value="Purchase Order Name"/>
                                            <h:outputText value=":"/>
                                            <p:inputText value="#{PurchaseOrderManagedBean.newPurchaseOrder.documentName}"/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel for="QuotationID" value="Quotation Reference ID"/>
                                            <h:outputText value=":"/>
                                            <h:selectOneMenu id="QuotationID" required="true" value="#{PurchaseOrderManagedBean.quotationInput}">
                                                <f:selectItem itemLabel="Select Quotation" itemValue=""/>
                                                <f:selectItems value="#{PurchaseOrderManagedBean.quotationList}" var="quotations"
                                                               itemLabel ="#{quotations.id}" itemValue="#{quotations.id}"/>
                                                <p:ajax update="ClientName ContactName pricingType shippingLocation billingLocation productId lineEntryList" 
                                                        listener="#{PurchaseOrderManagedBean.handleSalesDocumentChange}"/>
                                            </h:selectOneMenu>
                                            <p:message for="QuotationID"/>
                                            <h:outputText value=""/>

                                            <h:outputLabel for="ClientName" value="Client Name" />
                                            <h:outputText value=":"/>                                    
                                            <h:selectOneMenu id="ClientName" required="true" value="#{PurchaseOrderManagedBean.newPurchaseOrder.clientId}">

                                                <f:selectItem itemLabel="Select Client [Type - ID - Name]" itemValue=""/>
                                                <f:selectItems value="#{PurchaseOrderManagedBean.clientList}" var="clients"
                                                               itemLabel ="#{clients.clientType}    -   #{clients.id}    -   #{clients.name}" itemValue="#{clients.id}"/>    
                                                <p:ajax update="ContactName shippingLocation billingLocation" 
                                                        listener="#{PurchaseOrderManagedBean.handleClientChange}"/>

                                            </h:selectOneMenu>
                                            <p:commandLink oncomplete="customerDialog.show()" title="Client List" style="margin-left:-80px" >
                                                <p:graphicImage value="book.png" style="width:20px;height:20px"/>                 
                                            </p:commandLink>            
                                            <p:message for="ClientName"/>


                                            <h:outputLabel for="ContactName" value="Contact Name" />
                                            <h:outputText value=":"/>

                                            <h:selectOneMenu id="ContactName" value="#{PurchaseOrderManagedBean.newPurchaseOrder.contactId}">

                                                <f:selectItem itemLabel="Select Contact [ID - Name]" itemValue=""/>
                                                <f:selectItems value="#{PurchaseOrderManagedBean.contactList}" var="contacts"
                                                               itemLabel ="#{contacts.id} - #{contacts.firstName} #{contacts.lastName}" itemValue="#{contacts.id}"/>    
                                            </h:selectOneMenu>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputText value =" Pricing Type"/>
                                            <h:outputText value=":"/>
                                            <h:selectOneMenu id="pricingType" value ="#{PurchaseOrderManagedBean.pricingType}" >
                                                <f:selectItem itemLabel="-None-" itemValue=""/>
                                                <f:selectItem itemLabel="Flat" itemValue="F"/>
                                                <!-- <f:selectItem itemLabel="Differential" itemValue="D"/>-->
                                                <p:ajax update="panel"/>
                                            </h:selectOneMenu>
                                            <h:outputText value=""/> 
                                            <h:outputText value=""/>

                                            <h:outputText value=""/> 
                                            <h:outputText value=""/>
                                            <h:outputText value=""/> 
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>    

                                            <h:outputLabel for="DateIssued" value="Date Issued"/>
                                            <h:outputText value=":"/>
                                            <p:calendar id="DateIssued" value="#{PurchaseOrderManagedBean.newPurchaseOrder.dateIssued}" pattern="dd/MM/yyyy" required="true" /> 
                                            <p:message for="DateIssued"/>
                                            <h:outputText value=""/>

                                            <h:outputLabel for="DueDate" value="Due Date"/>
                                            <h:outputText value=":"/>
                                            <p:calendar id="DueDate" value="#{PurchaseOrderManagedBean.newPurchaseOrder.dueDate}" pattern="dd/MM/yyyy" required="true" /> 
                                            <p:message for="DueDate"/>
                                            <h:outputText value=""/>

                                            <h:outputText value="Shipping Location" style="font-weight:bolder"/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value="Billing Location" style="font-weight:bolder"/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:selectOneMenu id="shippingLocation" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingId}">
                                                <f:selectItem itemLabel="Select Shipping Location" itemValue=""/>
                                                <f:selectItems value="#{PurchaseOrderManagedBean.shippingAddress}" var="ship"
                                                               itemLabel="#{ship.street}, #{ship.country}" itemValue="#{ship.id}"/>
                                                <p:ajax update="shippingStreet shippingState shippingCity shippingCode shippingCountry" listener="#{PurchaseOrderManagedBean.handleShippingAddressChange}"/>
                                            </h:selectOneMenu>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:selectOneMenu id="billingLocation" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingId}">
                                                <f:selectItem itemLabel="Select Billing Location" itemValue=""/>
                                                <f:selectItems value="#{PurchaseOrderManagedBean.billingAddress}" var="bill"
                                                               itemLabel="#{bill.street}, #{bill.country}" itemValue="#{bill.id}"/>
                                                <p:ajax update="billingStreet billingState billingCity billingCode billingCountry" listener="#{PurchaseOrderManagedBean.handleBillingAddressChange}"/>
                                            </h:selectOneMenu>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>



                                            <h:outputLabel value="Shipping Street"  />
                                            <h:outputText value=":"/>
                                            <p:inputText id="shippingStreet" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingStreet}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Billing Street" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="billingStreet" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingStreet}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Shipping State" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="shippingState" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingState}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Billing State" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="billingState" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingState}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Shipping City" />
                                            <h:outputText value=":"/>
                                            <p:inputText  id="shippingCity" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingCity}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Billing City" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="billingCity" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingCity}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Shipping Code" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="shippingCode" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingCode}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Billing Code" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="billingCode" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingCode}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Shipping Country" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="shippingCountry" value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingCountry}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>

                                            <h:outputLabel value="Billing Country" />
                                            <h:outputText value=":"/>
                                            <p:inputText id="billingCountry" value="#{PurchaseOrderManagedBean.newPurchaseOrder.billingCountry}"/>                                  
                                            <h:outputText value=""/>
                                            <h:outputText value=""/>
                                        </h:panelGrid>



                                        <p:dialog header="Client Detail" widgetVar="customerDialog" resizable="false"  
                                                  width="700" showEffect="drop" hideEffect="drop">  
                                            <center>
                                                <h:panelGrid id="display1" columns="1" cellpadding="4" style="font-family:Tahoma;font-size:12px" >  

                                                    <p:dataTable id="childPanel1" value="#{PurchaseOrderManagedBean.clientList}"
                                                                 var="clients" paginator="true" rows="5">                          

                                                        <p:column headerText="Client ID">
                                                            <h:outputText value ="#{clients.id}"/>
                                                        </p:column>

                                                        <p:column headerText="Client Name">
                                                            <h:outputText value="#{clients.name}"/>
                                                        </p:column>

                                                        <p:column headerText="Client Type">
                                                            <h:outputText value="#{clients.clientType}"/>
                                                        </p:column>

                                                        <p:column headerText="Contact Number">
                                                            <h:outputText value="#{clients.contactNum}"/>
                                                        </p:column>

                                                        <p:column headerText="Business Type">
                                                            <h:outputText value="#{clients.businessType}"/>
                                                        </p:column>

                                                    </p:dataTable>

                                                </h:panelGrid></center>
                                        </p:dialog>


                                        <h:panelGrid columns="1" style="width:1080px" cellpadding="4">
                                            <h:outputText value="Description" style="font-weight:bolder"/>

                                            <p:inputTextarea value="#{PurchaseOrderManagedBean.newPurchaseOrder.description}" style="width:1060px;height:100px"/>

                                        </h:panelGrid>
                                        <h:panelGrid columns="1" style="width:1080px" cellpadding="3">
                                            <p:fieldset legend="Delivery Information" toggleable="true" toggleSpeed="500">                                                                    
                                                <h:panelGrid columns="10" cellpadding="3" cellspacing="3" style="width:1070px;font-family:Tahoma;font-size:12px" >  
                                                    <h:outputLabel value="Shipping Method"/>
                                                    <h:outputText value=":" style="margin-left:0px"/>
                                                    <h:selectOneMenu value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingMethod}">
                                                        <f:selectItem itemLabel="Land" itemValue="Land"/>
                                                        <f:selectItem itemLabel="Air" itemValue="Air"/>
                                                        <f:selectItem itemLabel="Sea" itemValue="Sea"/>
                                                    </h:selectOneMenu>
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>

                                                    <h:outputLabel value="Shipping Rule" style="margin-left:-40px"/>
                                                    <h:outputText value=":" style="margin-right:10px"/>
                                                    <h:selectOneMenu value="#{PurchaseOrderManagedBean.newPurchaseOrder.shippingRule}">
                                                        <f:selectItem itemLabel="Availability" itemValue="Availability"/>
                                                        <!-- <f:selectItem itemLabel="Complete Line" itemValue="Complete Line"/>
                                                         <f:selectItem itemLabel="After Receipt" itemValue="After Receipt"/> -->            
                                                    </h:selectOneMenu>                           
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>   

                                                    <h:outputLabel value="Freight Cost Rule"  />
                                                    <h:outputText value=":" style="margin-left:0px"/>
                                                    <h:outputText value="Freight Cost Included."/>                                  
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>  


                                                </h:panelGrid>  
                                            </p:fieldset>
                                        </h:panelGrid>
                                        <h:panelGrid columns="1" style="width:1080px" cellpadding="4">
                                            <p:fieldset legend="Payment and Invoice Information" toggleable="true" toggleSpeed="500">                                                                    
                                                <h:panelGrid columns="10" cellpadding="4" style="font-family:Tahoma;font-size:12px">  
                                                    <h:outputLabel value="Payment Method" />
                                                    <h:outputText value=":" style="margin-left:140px"/>
                                                    <h:selectOneMenu value="#{PurchaseOrderManagedBean.newPurchaseOrder.paymentMethod}">
                                                        <f:selectItem itemLabel="On Credit" itemValue="On Credit"/>
                                                        <!-- <f:selectItem itemLabel="Credit Card" itemValue="Credit Card"/>-->
                                                        <f:selectItem itemLabel="Cash" itemValue="Cash"/>
                                                        <!--<f:selectItem itemLabel="Check" itemValue="Check"/>-->
                                                    </h:selectOneMenu>
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>

                                                    <h:outputLabel value="Invoice Rule" style="margin-left:210px" />
                                                    <h:outputText value=":" style="margin-left:93px"/>
                                                    <h:selectOneMenu style="margin-left:45px" value="#{PurchaseOrderManagedBean.newPurchaseOrder.invoiceRule}">
                                                        <f:selectItem itemLabel="After Delivery" itemValue="After Delivery"/>
                                                        <!-- <f:selectItem itemLabel="Immediate" itemValue="Immediate"/>
                                                         <f:selectItem itemLabel="After Order Delivered" itemValue="After Order Delivered"/>
                                                         <f:selectItem itemLabel="Customer Schedule" itemValue="Customer Schedule"/>   -->
                                                    </h:selectOneMenu>                           
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>  

                                                    <h:outputLabel value="Currency" />
                                                    <h:outputText value=":" style="margin-left:140px"/>
                                                    <h:outputText value="SGD"/>                                  
                                                    <h:outputText value=""/>
                                                    <h:outputText value=""/>  


                                                </h:panelGrid>  
                                            </p:fieldset>
                                        </h:panelGrid>                            
                                    </p:panel>



                                    <div id="productContent">
                                        <p:panel id="panel" style="border-style:hidden;font-family:Tahoma;font-size:12px">  
                                            <h:graphicImage value="box.png" style="width:35px;height:35px"/>
                                            <h:outputText value="Product Details" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                            <p:separator style="width:1070px"/>
                                            <h:panelGrid columns="3" id="grid" style="width:540px" cellpadding="4">  

                                                <h:outputLabel value="Product Name" for="productId"/>
                                                <h:outputLabel value=":" style="margin-left:30px"/>
                                                <h:selectOneMenu id="productId" value="#{PurchaseOrderManagedBean.lineEntry.itemId}" >
                                                    <f:selectItem itemLabel="Select Product [Product Name - Base Price]" itemValue=""/>
                                                    <f:selectItems value="#{PurchaseOrderManagedBean.productList}" var="products"
                                                                   itemLabel ="#{products.itemName}    -    #{products.price}" itemValue="#{products.id}"/>
                                                    <p:ajax update="pricebook"  listener="#{PurchaseOrderManagedBean.handleProductChange}" /> 


                                                </h:selectOneMenu> 


                                                <h:outputLabel value="Pricebook" for="pricebook"/>
                                                <h:outputLabel value=":" style="margin-left:30px"/>
                                                <h:selectOneMenu id="pricebook"  value="#{PurchaseOrderManagedBean.lineEntry.pricebookId}" >
                                                    <f:selectItem itemLabel="Select Pricebook" itemValue=""/>
                                                    <f:selectItems value="#{PurchaseOrderManagedBean.pricebookList}" var="price"
                                                                   itemLabel ="#{price.id}" itemValue="#{price.id}"/>
                                                    <p:ajax update="price"   
                                                            listener="#{PurchaseOrderManagedBean.handlePricebookChange}" /> 
                                                </h:selectOneMenu> 

                                                <h:outputLabel value="Quantity" for="quantity"/>
                                                <h:outputLabel value=":" style="margin-left:30px"/>
                                                <p:inputText id="quantity" required="true"   
                                                             value="#{PurchaseOrderManagedBean.lineEntry.quantity}" >
                                                    <p:ajax event="keyup" update="pricebook price"  listener="#{PurchaseOrderManagedBean.handlePricebookChange}"/></p:inputText>



                                                <h:outputText value="List Price"/>
                                                <h:outputLabel value=":" style="margin-left:30px" />
                                                <p:inputText id="price" value="#{PurchaseOrderManagedBean.lineEntry.price}">
                                                    <p:ajax listener="#{PurchaseOrderManagedBean.handlePriceChange}"/>
                                                </p:inputText>


                                            </h:panelGrid> 

                                            <p:commandButton value="Add" update="lineEntryList msgs @parent"  
                                                             action="#{PurchaseOrderManagedBean.reinit}" style="margin-left:233px" image="ui-icon ui-icon-plus" >  
                                                <p:collector value="#{PurchaseOrderManagedBean.lineEntry}"   
                                                             addTo="#{PurchaseOrderManagedBean.lineEntryList}" />  
                                            </p:commandButton>  
                                            <p:commandButton value="Reset" type="reset" image="ui-icon ui-icon-arrowrefresh-1-s"/>  


                                            <p:dialog header="Product Detail" widgetVar="productDialog" resizable="false"  
                                                      width="700" showEffect="drop" hideEffect="drop">  
                                                <center>
                                                    <h:panelGrid id="display2" columns="1" cellpadding="4" style="font-family:Tahoma;font-size:12px" >  

                                                        <p:dataTable id="childPanel2" value="#{PurchaseOrderManagedBean.productList}"
                                                                     var="products" paginator="true" rows="5">                          

                                                            <p:column headerText="ID">
                                                                <h:outputText value ="#{products.id}"/>
                                                            </p:column>

                                                            <p:column headerText="Name">
                                                                <h:outputText value="#{products.itemName}"/>
                                                            </p:column>

                                                            <p:column headerText="Base Price">
                                                                <h:outputText value="#{products.price}"/>
                                                            </p:column>




                                                        </p:dataTable>

                                                    </h:panelGrid></center>
                                            </p:dialog>


                                            <p:ajaxStatus style="width:16px;height:16px;">  
                                                <f:facet name="start">  
                                                    <h:graphicImage value="25(2).gif" />  
                                                </f:facet>  

                                                <f:facet name="complete">  
                                                    <h:outputText value="" />  
                                                </f:facet>  
                                            </p:ajaxStatus>

                                            <p:outputPanel id="lineEntryList">  

                                                <p:dataTable value="#{PurchaseOrderManagedBean.lineEntryList}" var="lineEntry" 
                                                             rowEditListener ="#{PurchaseOrderManagedBean.onRowEdit}" 
                                                             style="font-family:Tahoma;font-size:12px"  >  

                                                    <p:column>  
                                                        <f:facet name="header">  
                                                            <h:outputText value="Product ID" />  
                                                        </f:facet>  
                                                        <h:outputText value="#{lineEntry.itemId}" />  
                                                    </p:column>  

                                                    <p:column>  
                                                        <f:facet name="header">  
                                                            <h:outputText value="Product Name" />  
                                                        </f:facet>  
                                                        <h:outputText value="#{lineEntry.itemName}" />  
                                                    </p:column>  

                                                    <p:column headerText="Quantity" >  
                                                        <p:cellEditor>
                                                            <f:facet name="output">  
                                                                <h:outputText value="#{lineEntry.quantity}" />  
                                                            </f:facet>
                                                            <f:facet name="input">
                                                                <p:inputText value="#{lineEntry.quantity}" />
                                                            </f:facet>
                                                        </p:cellEditor>
                                                    </p:column>  

                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Base Price"/>

                                                        </f:facet>
                                                        <h:outputText value="#{lineEntry.basePrice}"/>
                                                    </p:column>

                                                    <p:column headerText="Price" style="width:100px;border-right-color:transparent">  
                                                        <p:cellEditor  >
                                                            <f:facet name="output">  
                                                                <h:outputText value="#{lineEntry.price}" />  
                                                            </f:facet>  
                                                            <f:facet name="input">
                                                                <h:inputText value="#{lineEntry.price}" >
                                                                    <p:ajax update="totalPrice"/></h:inputText>
                                                            </f:facet>
                                                        </p:cellEditor>
                                                    </p:column>

                                                    <p:column style="width:30px;border-left-color:transparent">    
                                                        <p:rowEditor/>
                                                    </p:column>


                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Total"/>
                                                        </f:facet>
                                                        <h:outputText id="totalPrice" value="#{lineEntry.totalPrice}"/>
                                                    </p:column>

                                                    <p:column>  
                                                        <f:facet name="header">  
                                                            <h:outputText value="Operation" />  
                                                        </f:facet>  
                                                        <p:commandLink value="Remove" update="lineEntryList" process="@this">  
                                                            <p:collector value="#{lineEntry}"  
                                                                         removeFrom="#{PurchaseOrderManagedBean.lineEntryList}" />  
                                                        </p:commandLink>  
                                                    </p:column>  

                                                </p:dataTable>  
                                            </p:outputPanel>
                                        </p:panel>
                                    </div>

                                    <p:panel style ="text-align:right;font-family:Tahoma;border-style:hidden; font-size:12px">
                                        <p:commandButton style="text-align:right" value="Submit" update="paneldisplay msgs @parent" ajax="false" actionListener="#{PurchaseOrderManagedBean.addPurchaseOrder}"/>

                                    </p:panel>

                                </td>
                            </tr>
                        </table>

                    </div>


                    <div id="bottom" class="bottom">
                        <h:graphicImage value="/image/merlionfooter.jpg"/>
                    </div>


                </h:form>

            </h:body>
        </f:view>
    </f:view>
</html>
